<template>
  <div>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      :append-to-body="true"
      :before-close="handleClose"
      :visible.sync="visible"
      width="800px"
    >
      <!--高级查询-->



      <div class="filter_container">
        <div class="filter_row">
          <el-form ref="form" :model="params" :inline="true" label-width="100px" size="mini">
            <el-row :gutter="24">
              <el-col :span="12">
               <el-form-item label="品牌:" prop="params.vehicleBrand">
                         <el-select v-model="params.vehicleBrand" @change="selectVehicleBrand"
                          prop="vehicleBrand" placeholder="请选择"  filterable clearable style="width: 100%;">
                           <el-option v-for="option in brandList" :key="option.vehicleBrand" :label="option.vehicleBrand" :value="option.vehicleBrand"/>
                         </el-select>
                       </el-form-item>
              </el-col>
              <el-col :span="12">
               <el-form-item label="车型:" prop="params.vehicleModel">
                 <el-select v-model="params.vehicleModel" 
                  prop="params.vehicleModel" placeholder="请选择"  filterable clearable style="width: 100%;">
                   <el-option v-for="option in vehicleTypeList" :key="option.vehicleModel" :label="option.vehicleModel" :value="option.vehicleModel"/>
                 </el-select>
               </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>


      <!--操作按钮-->
      <div class="operation_container">
        <ul>
          <li><el-button v-waves type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button></li>
        </ul>
      </div>
      <!--栅格-->
      <div>
        <el-table
          ref="singleTable"
          v-loading="loading"
          :data="page.rows"
          element-loading-text="Loading"
          border
          stripe
          fit
          highlight-current-row
        >
          <el-table-column fixed align="center" label="序" width="50">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
           <el-table-column label="车辆品牌" align="center" prop="vehicleBrand" />
          <el-table-column label="名称" align="center" prop="vehicleName" />
          <el-table-column label="车辆型号" align="center" prop="vehicleModel" />
          <el-table-column label="发动机型号" align="center" prop="engineModel" />
          <el-table-column label="操作" align="center" fixed="right" width="80">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" icon="el-icon-finished" circle @click="handleSelected(scope.row)" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <div>
        <el-pagination
          v-show="page.total > 0"
          :current-page="page.current"
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          :total="page.total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import appConfig from '@/config/AppConfig'
import TWhWarehouseCustomerMaterialApi from '@/api/pms/TWhWarehouseCustomerMaterialApi'

export default {
  directives: {
    waves
  },
  props: {
    customerNo: {
      type: String,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '随车工具商品车型选择',
      selects: {},
      params: {
        skuName: null,
        customerNo: null
      },
      page: {
        current: appConfig.page.currentPage,
        pageSize: appConfig.page.pageSize,
        pageSizes: appConfig.page.pageSizes,
        total: null,
        rows: null
      },
      loading: false,
      brandList: [],
      vehicleTypeList: []
    }
  },
  created() {
    this.loadData()
     this.loadOptions()
  },
  methods: {
    loadData() {

        this.loading = true
        this.params.customerNo = '1000'
        if (this.params.customerNo) {
          TWhWarehouseCustomerMaterialApi.page(this.params, this.page).then(response => {
            this.page.total = response.data.total
            this.page.rows = response.data.records
            this.loading = false
          }, () => {
            this.loading = false
          })
        }

    },
    loadOptions() {
      TWhWarehouseCustomerMaterialApi.findVehicleBrand({}).then(res =>{
        this.brandList = res.data
      })
    },
    selectVehicleBrand(e){
    	this.params.vehicleBrand = e
      TWhWarehouseCustomerMaterialApi.findVehicleModel({vehicleBrand:e}).then(res =>{
          this.vehicleTypeList = res.data
      })

    },
    handleFilter() {
      this.page.current = appConfig.page.currentPage
      this.loadData()
    },
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.loadData()
    },
    handleCurrentChange(currentPage) {
      this.page.current = currentPage
      this.loadData()
    },
    handleSelected(row) {
      this.$emit('selected', row)
      this.handleClose()
    },
    handleClose() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
// 高级查询
.filter_container {
  padding-bottom: 0;
  .filter_row {
    .el-row {
      .el-col {
        .el-form-item{
          margin-bottom: 0;
        }
      }
    }
  }
}
// 操作按钮
.operation_container {
  ul {
    margin-top: 0;
    li {
      float: right;
      list-style: none;
      padding-right: 2px;
      button {
        margin-bottom: 4px;
      }
    }
  }
}
</style>
